<template>
  <div class="choiceGoods">
    <a-modal :title="dialogVisibleTile" v-model="dialogVisible" width="780px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :labelWidth="labelWidth"
        class="demo-ruleForm"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="商品分类：" prop="spfl">
              <a-select
                v-model="ruleForm.spfl"
                placeholder="请选择商品分类"
                style="width:100%"
                clearable
                @change="chioseGoods"
              >
                <a-select-option
                  :value="item.value"
                  v-for="(item,index) in spflList"
                  :key="index"
                >{{item.label}}</a-select-option>
              </a-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="商品名称：" prop="name">
              <a-input-search v-model="ruleForm.name" placeholder="请输入门店名称" @search="onSearch" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" style="text-align: center">
            <a-transfer
              style="text-align: left; display: inline-block"
              v-model="ruleForm.chioseVal"
              :titles="['全选门店', '已选门店']"
              :list-style="{
                width: '300px',
                height: '300px',
              }"
              @change="handleChange"
              :target-keys="targetKeys"
              :render="item => `${item.title}`"
              :data-source="mockData"
            ></a-transfer>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <a-button @click="handleClose">取 消</a-button>
        <a-button type="primary" @click="handleSure()" :loading="loading">确 定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleTile: '',
      loading: false,
      labelWidth: '120px',
      rules: {
        lmmc: [
          {
            required: true,
            message: '请输入分组名称，不超过15个字',
            trigger: 'blur'
          }
        ]
      },
      ruleForm: {
        chioseVal:[]
      },
      spflList: [
        //商品分类
        {
          label: '类型1',
          value: 1
        },
        {
          label: '类型2',
          value: 2
        },
        {
          label: '类型3',
          value: 3
        }
      ],
      targetKeys:[],
      mockData: [
        {
          key: '脉动菠萝味500ml',
          label: '脉动菠萝味500ml'
        },
        {
          key: '可口可乐330ml',
          label: '可口可乐330ml'
        },
        {
          key: '可口可乐200ml',
          label: '可口可乐200ml'
        }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      const targetKeys = []
      const mockData = []
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1
        }
        if (data.chosen) {
          targetKeys.push(data.key)
        }
        mockData.push(data)
      }
      this.mockData = mockData
      this.targetKeys = targetKeys
    },
    handleSure() {
      console.log(this.ruleForm)
      // this.$emit('trigger', this.ruleForm)
      // this.handleClose()
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleChange() {},
    chioseGoods(e) {
      console.log(e)
      if (e) {
        this.data = [
          {
            key: 0,
            label: '脉动菠萝味500ml'
          },
          {
            key: 1,
            label: '可口可乐330ml'
          }
        ]
      } else {
        this.data = [
          {
            key: 0,
            label: '脉动菠萝味500ml'
          },
          {
            key: 1,
            label: '可口可乐330ml'
          },
          {
            key: 2,
            label: '可口可乐330ml'
          },
          {
            key: 3,
            label: '可口可乐200ml'
          }
        ]
      }
    },
    onSearch(){

    }
  }
}
</script>

<style>
</style>